<template>
    <div class="left-nav">
        <el-col :span="3">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                background-color="#324157" text-color="#ccc" :router="true">
                <el-menu-item :index="'/'">首页</el-menu-item>
                <el-sub-menu :index="menu.id + ''" v-for="menu in menuConf" :key="menu.id">
                    <template #title>
                        <span>{{ menu.title }}</span>
                    </template>
                    <template v-for="submenu in menu.children" :key="submenu.id">
                        <el-menu-item :index="'/' + menu.name + '/' + submenu.name" v-if="!submenu.hidden">{{
                                submenu.title
                        }}</el-menu-item>
                    </template>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/modules/user'
import { computed } from 'vue';
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const userStore = useUserStore()
let menuConf = computed(() => userStore.genMenuConf)
// const menus = [{
//     title: '商品',
//     children: [{ title: '商品列表' }, { title: '添加商品' }, { title: '商品分类' }, { title: '商品类型' }, { title: '品牌管理' }]
// }]
</script>
<style lang="less" scoped>
:deep {
    .el-menu.el-menu--vertical.el-menu-vertical-demo {
        height: calc(100vh - 70px);
    }

    .el-menu--collapse {
        /* 左边导航缩小之后的高度 */
        height: 100%;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        background-color: #324157;
        width: 250px;
        height: 100%;
    }
}
</style>